<template>
	<view class="page">
		<uni-nav-bar background-color="#F6F6F6" leftWidth="60rpx" rightWidth="60rpx" status-bar left-icon="left" :fixed="true" :border="false" @clickLeft='back'>
			<block slot="default">
				<div class="nav-bar">
					<view class="title">{{productName}}</view>
					<view class="sub">Order No. :{{orderNo}}</view>
				</div>
			</block>
		</uni-nav-bar>
		
		<view class="con-box">
			<view class="fun-flex-row fun-justify-between trade-info">
				<view class="fun-flex-col fun-justify-between fun-items-center">
					<text class="top">Transaction Amount</text>
					<text class="bottom fun-mt-10">${{orderDayInfo.tradingAmount}}</text>
				</view>
				
				<view class="fun-flex-col fun-justify-between fun-items-center">
					<text class="top">Trades Number</text>
					<text class="bottom fun-mt-10">{{orderDayInfo.tradingNumber}}</text>
				</view>
				
				<view class="fun-flex-col fun-justify-between fun-items-center">
					<text class="top">Day's Profit /Loss</text>
					<text class="bottom profit" :class="orderDayInfo.profit < 0 ? 'fall-text' : 'rise-text'">{{removeMinusSign(orderDayInfo.profit)}}</text>
				</view>
			</view>
			
			<scroll-view scroll-y="true" enable-back-to-top="true" @scrolltolower="scrolltolower" :style="{height: (windosHeight - 44 - 73 - 32) + 'px'}">
				<view class="tsla-wrap"	v-for="item in orderDayList" :key="item.id">
					<view class='list'>
						<view class='top fun-flex-row fun-justify-between fun-items-center'>
							<view class="fun-flex-col fun-justify-between">
								<view class="title-tsla">{{item.code}}</view>
								<view class="fun-mt-10 fun-mb-6 com-text">Direction:<text :class="item.tradeType == 2 ? 'fall-text' : 'rise-text'" v-text="item.tradeType == 1 ?'Long' : 'Short'"></text></view>
								<view class="com-text">Quantity:<text>{{item.quantity}} Shares</text></view>
							</view>
							
							<view class="fun-flex-col fun-justify-between">
								<view class="title">Price($)</view>
								<view class="fun-mt-10 fun-mb-6 com-text">Buy:<text>{{item.buyPrice}}</text></view>
								<view class="com-text">Sell:<text>{{item.sellPrice}}</text></view>
							</view>
							
							<view class="fun-flex-col fun-justify-between">
								<view class="title">Time</view>
								<view class="fun-mt-10 fun-mb-6 com-text">{{item.buyTime}}</view>
								<view class="com-text">{{item.sellTime}}</view>
							</view>
						</view>
						
						<view class="bottom fun-flex-row fun-items-center">Gain/Loss:<text :class="item.profit < 0 ? 'fall-text' : 'rise-text'">{{item.profit}}</text></view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {removeMinusSign} from "@/common/js/func.js"
	import {holdOrderDayInfo,holdOrderDayTradeList} from "@/api/home.js"
	export default {
		data() {
			return {
				queryData:{
					orderId:"",
					dayId:""
				},
				queryList:{
					orderId:"",
					dayId:"",
					page:1,
					limit:10,
				},
				orderNo:"",
				productName:"",
				orderDayInfo:{},
				orderDayList:[],
				total:0,
				removeMinusSign,
				windosHeight:"" //可使用窗口高度(不包含NavigationBar和TabBar的高度)
			};
		},
		
		onLoad(option) {
			const query = JSON.parse(option?.query) || {}
			this.orderNo = decodeURIComponent(query.orderNo) || "";
			this.productName = decodeURIComponent(query.productName) || "";
			this.queryData.dayId = this.UTILS.stringToNum(decodeURIComponent(query.dayId)) || null;
			this.queryData.orderId = this.UTILS.stringToNum(decodeURIComponent(query.orderId)) || null;
			this.queryList.orderId = this.queryData.orderId;
			this.queryList.dayId = this.queryData.dayId;
			this.getHoldOrderDayInfo();
			uni.getSystemInfo({
				success: res => {
					this.windosHeight = res.windowHeight
				}
			})
			setTimeout(() => {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		
		onPullDownRefresh() {
			this.orderDayList = [];
			this.queryList.page = 1;
			this.getHoldOrderDayTradeList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		methods: {
			getHoldOrderDayInfo(){
				holdOrderDayInfo(this.queryData).then(res => {
					if(res.code == 0){
						this.orderDayInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			getHoldOrderDayTradeList(){
				holdOrderDayTradeList(this.queryList).then(res => {
					if(res.code == 0){
						this.orderDayList = this.orderDayList?.concat(res.data) || [];
						this.total = res.count;
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			// 触底加载更多
			scrolltolower(){
				if (this.total > this.orderDayList.length) {
					this.queryList.page++;
					this.getHoldOrderDayTradeList();
				}
			},
			
			back(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		width: 100%;
		.nav-bar{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			.title{
				font-size: 32rpx;
				width: 90%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.sub{
				font-size: 24rpx;
				color: #7F7F7F;
			}
		}
		.con-box{
			padding:32rpx;
			.trade-info{
				margin-top: 24rpx;
				padding: 24rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				border: solid 2rpx #f0f0f0;
				&:first-child {
					margin-top: 0;
				}
				.top{
					font-size: 24rpx;
				}
				.bottom{
					font-size: 32rpx;
				}
				.profit{
					font-weight: 500;
					font-size: 32rpx;
				}
			}
			
			.tsla-wrap{
				margin-top: 24rpx;
				width: 100%;
				.list{
					padding: 24rpx 24rpx 28rpx 24rpx;
					background: #FFFFFF;
					border-radius: 16px;
					border: 2rpx solid #F0F0F0;
					.top{
						padding-bottom: 24rpx;
						border-bottom: 2rpx solid #D9D9D9;
						.title{
							font-weight: 400;
							font-size: 24rpx;
						}
						.title-tsla{
							font-weight: 500;
							font-size: 32rpx;
						}
						.com-text{
							font-size: 24rpx;
							color: #7F7F7F;
						}
					}
					.bottom{
						padding-top: 20rpx;
						font-size: 24rpx;
						text{
							margin-left: 8rpx;
							font-weight: 500;
							font-size: 32rpx;
						}
					}
				}
				.list:not(:last-child){
					margin-bottom: 24rpx;
				}
			}
		}
	}
</style>